// 等待DOM加载完成
$(document).ready(function() {
    // 1. 密码显示/隐藏切换
    const $togglePassword = $('#togglePassword');
    const $passwordInput = $('#password');

    $togglePassword.on('click', function() {
        // 切换输入框类型
        const isPassword = $passwordInput.attr('type') === 'password';
        $passwordInput.attr('type', isPassword ? 'text' : 'password');

        // 切换图标
        const $icon = $(this).find('i');
        if (isPassword) {
            $icon.removeClass('fa-eye').addClass('fa-eye-slash');
        } else {
            $icon.removeClass('fa-eye-slash').addClass('fa-eye');
        }
    });

    // 2. 登录按钮加载状态
    const $loginForm = $('#loginForm');
    const $loginBtn = $('#loginBtn');
    const $loginBtnText = $('#loginBtnText');
    const $loginLoading = $('#loginLoading');

    $loginForm.on('submit', function() {
        // 禁用按钮防止重复提交
        $loginBtn.prop('disabled', true);
        // 显示加载动画，隐藏文字
        $loginBtnText.addClass('d-none');
        $loginLoading.removeClass('d-none');
    });

    // 3. 输入框聚焦时清除错误状态
    const $loginInputs = $('.login-input');
    $loginInputs.on('focus', function() {
        $(this).removeClass('is-invalid');
    });

    // 4. 页面加载时自动聚焦用户名输入框
    $('#username').focus();
});